<template>
  <div class="order">
    <div class="order-content">
      <div class="title">全部订单</div>
      <div class="operation-box">
        <el-button type="primary" :icon="Refresh" @click="table_reload"
          >刷新</el-button
        >
        <el-button
          type="danger"
          v-if="table_data_origin && table_data_origin.length > 0"
          :icon="Download"
          @click="export_excel(table_data_origin, '订单列表')"
          >导出数据</el-button
        >

        <el-input
          v-model="search_username"
          class="w-50 m-2"
          size="default"
          style="width: 180px; margin: 0 10px 0 30px"
          clearable
          :prefix-icon="Search"
          @input="search_filter"
          placeholder="输入收货人姓名搜索"
        />
        <el-input
          v-model="search_phone"
          class="w-50 m-2"
          size="default"
          :prefix-icon="Search"
          style="width: 180px; margin: 0 10px 0 0px"
          clearable
          @input="search_filter"
          placeholder="输入收货人联系号码搜索"
        />
        <el-button type="default" @click="search_reset">重置</el-button>
      </div>
      <el-table
        :data="table_data"
        table-layout="fixed"
        size="large"
        style="width: 100%"
        max-height="500"
        v-loading="table_loading"
        :element-loading-svg="table_svg"
        class="custom-loading-svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
      >
        <el-table-column label="下单时间" width="200">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <span style="margin-left: 10px">{{ formatDate(Number(scope.row.order_time), '-') }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单号" prop="order_id" width="100"/>
        <el-table-column label="订单状态" width="100">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span
                :style="{
                  color:
                    scope.row.order_status == 'WAIT_PAYMENT'
                      ? 'red'
                      : (scope.row.order_status == 'CANCELLED' || scope.row.order_status == 'OVERDUE')  
                      ? '#c8c9cc'
                      : (scope.row.order_status == 'IN_STOCK' || scope.row.order_status == 'DELIVERED')
                      ? '#E6A23C'
                      : scope.row.order_status == 'FINISHED'
                      ? '#67C23A'
                      : '',
                }"
                >{{ translateOrderStatus(scope.row.order_status) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单总额" prop="total_price" width="100"/>
        <el-table-column label="订单备注" prop="note" width="300"/>
        <el-table-column label="收货人姓名" prop="shipping_name" width="120"/>
        <el-table-column label="邮编" prop="postalCode" width="100"/>
        <el-table-column label="收货人联系号码" prop="shipping_mobile" width="150"/>
        <el-table-column label="收货人性别" prop="shipping_sex" width="120"/>
        <el-table-column label="收货人地址" width="300" prop="shipping_address" />
        <el-table-column label="收货人详细地址" width="300" prop="shipping_detail_address" />
        <el-table-column label="优惠总额" prop="discount_price" width="100"/>
        <el-table-column label="运费" prop="shipping_cost" width="100"/>
        <el-table-column label="支付类型" prop="pay_type" width="100"/>

        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              size="large"
              type="primary"
              link
              @click="before_handle_deliver(scope.$index, scope.row)"
              >发货</el-button
            >
            <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="是否确定删除"
              @confirm="handle_delete(scope.$index, scope.row)"
              @cancel="cancelEvent"
            >
              <template #reference>
                <el-button link size="large" type="primary" style="color: red"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      v-model:currentPage="current_page" 
      v-model:page-size="page_size"
      :page-sizes="[10,15, 20, 50]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      style="
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;
        margin-left: 2.5%;
      "
      :total="pagination_total"
      @size-change="handleSizeChange" 
      @current-change="pageChange"
    />

    <!-- 发货二次确认 -->
    <el-dialog v-model="deliver_visible" title="温馨提示" width="400px">
      <span>发货后需尽快配送，是否确认发货？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deliver_visible = false">取消</el-button>
          <el-button
            type="primary"
            @click="deliver_service"
            :loading="deliver_loading"
          >
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { Refresh, Download, Search, Timer } from "@element-plus/icons-vue";
import { export_excel, formatDate, translateOrderStatus } from "../../../common/utils";
import { ElMessage } from "element-plus";
import { orderDelete, getOrderList, changeOrderStatus } from "../../ajaxServices/orders";

interface Order {
  date: string;
  order_id: number;
  order_status: string;
  user_name: string;
  phone: string;
  address: string;

}

const table_data_origin = ref([]);

const table_data = ref<Order>(table_data_origin.value);
const current_page = ref(1); // 当前页码
const page_size = ref(10); // 每页条数
const pagination_total = ref(1); // 页码总条数
const current_row = ref(null);

const table_loading = ref(false);
const search_username = ref("");
const search_phone = ref("");

const table_svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const search_filter = () => {
  if (search_username.value == "" && search_phone.value == "") {
    table_data.value = table_data_origin;
    return;
  }

  if (search_username.value != "" && search_phone.value == "") {
    table_data.value = table_data_origin.filter((data: any) =>
      data.user_name.toLowerCase().includes(search_username.value.toLowerCase())
    );
  }

  if (search_username.value == "" && search_phone.value != "") {
    table_data.value = table_data_origin.filter((data: any) =>
      data.phone.toLowerCase().includes(search_phone.value.toLowerCase())
    );
  }

  if (search_username.value != "" && search_phone.value != "") {
    table_data.value = table_data_origin.filter(
      (data: any) =>
        data.phone.toLowerCase().includes(search_phone.value.toLowerCase()) &&
        data.user_name
          .toLowerCase()
          .includes(search_username.value.toLowerCase())
    );
  }
};

// 重置搜索框
const search_reset = () => {
  search_username.value = "";
  search_phone.value = "";
  table_data.value = table_data_origin;
};

// 分页切换页码
const page_change = (currentPage: number) => {
  current_page.value = currentPage;
  table_reload()
};

// 刷新表格数据
const table_reload = () => {
  table_loading.value = true;

  let reqData = {
    page_size: page_size.value,
    page_count: current_page.value,
  };

  getOrderList(reqData).then((res: any) => {
    table_loading.value = false;
    table_data_origin.value = res.data || [];
    table_data.value = res.data || [];
    pagination_total.value = res.total

  }).catch(() => {table_loading.value = false;})

};
table_reload();

// 分页器相关
const handleSizeChange = (val:any) => {
  page_size.value = val
  table_reload();
}


const pageChange = (val:any) => {
  current_page.value = val
  table_reload();
}

/*
  发货相关
*/
const deliver_loading = ref(false);
const deliver_visible = ref(false);
const before_handle_deliver = (index: number, row: Order) => {
  current_row.value = row;
  deliver_visible.value = true;
};

const deliver_service = () => {
  deliver_loading.value = true;
  let timer = setTimeout(() => {
    clearTimeout(timer);
    deliver_loading.value = false;
    deliver_visible.value = false;
  }, 3000);
};

/*
  删除相关
*/

const handle_delete = (index: number, row: Order) => {
  console.log("rows:");
  console.log(row);
};
</script>


<style scoped lang="scss">
.order {
  .order-content {
    width: 95%;
    height: 80%;
    max-height: calc(100vh - 60px - 40px - 100px);
    border: 1px solid #eee;
    border-radius: 5px;
    margin: auto;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);

    .title {
      width: 100%;
      height: 55px;
      font-size: 18px;
      color: #000;
      text-align: left;
      line-height: 55px;
      text-indent: 20px;
      border-bottom: 1px solid #eee;
    }

    .operation-box {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
  }
}
</style>

<style>
.el-dialog__header,
.el-dialog__body {
  text-align: left;
}
</style>






